<template>
    <el-text type="primary" size="large">
        <h1 class="my-h1">个人中心</h1>
    </el-text>

    <br>

    <h3 class="my-h3">用户信息</h3>
    <el-descriptions class="margin-top" :column="1" size="large" style="width: 35%;margin: 20px auto;text-align: center;"
        border>
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">
                    <el-icon><user /></el-icon>
                    用户名
                </div>
            </template>
            {{ this.$store.state.user.username }}
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">
                    <el-icon><Message /></el-icon>
                    email
                </div>
            </template>
            {{ this.$store.state.user.email }}
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">
                    <el-icon><iphone /></el-icon>
                    Phone
                </div>
            </template>
            {{ this.$store.state.user.phone }}
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">
                    <el-icon><tickets /></el-icon>
                    账号类型
                </div>
            </template>
            <span v-if="this.$store.state.user.isAdmin">
                <el-tag type="success">管理员账号</el-tag>
            </span>
            <span v-else>
                <el-tag >普通用户账号</el-tag>
            </span>
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">
                    <el-icon><Link /></el-icon>
                    <span>注册时间</span>
                </div>
            </template>
            {{ this.$store.state.user.createTime }}
        </el-descriptions-item>
    </el-descriptions>


    <el-row>
        <el-button type="primary" plain @click="exitLogin"
            style="margin: 0 auto;width: 300px;height: 70px;border-radius: 50px;font-size: 20px;">退出登录</el-button>
    </el-row>
</template>

<script>


export default {
    data() {
        return {};
    },
    created() {
        //取消登录状态，清空缓存user对象
        this.$store.state.isLogin = false;
        //触发自动登录，通过token重新获取user对象
        this.$store.state.isLogin = true;
    },
    methods: {
        exitLogin() {
            this.$cookies.remove('token');
            this.$store.state.onAdmin = false;
            this.$store.state.isLogin = false;
            setTimeout(() => this.$store.state.navActive = '/login',10)
            
        },
    }
}
</script>

<style scoped>
.my-h1 {
    color: #000;
    text-align: center;
    font-size: 28px;
}
.my-h3 {
    text-align: center;
    color: #000;
}

.cell-item {
    font-weight: 700;
}
</style>